<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应急响应中心管理系统</title>
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    <style>
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .card-red {
            border-top: 3px solid #e74c3c;
        }
        .card-blue {
            border-top: 3px solid #3498db;
        }
        .card-green {
            border-top: 3px solid #2ecc71;
        }
        .card-orange {
            border-top: 3px solid #f39c12;
        }
        .navbar-brand {
            display: flex;
            align-items: center;
        }
        .navbar-logo {
            height: 40px;
            margin-right: 10px;
        }
        .welcome-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 0;
            margin-bottom: 30px;
            border-radius: 15px;
        }
        .stats-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }
        .stats-card:hover {
            transform: translateY(-2px);
        }
        .access-denied {
            text-align: center;
            padding: 50px 20px;
            color: #6c757d;
        }
        .access-denied i {
            font-size: 4rem;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 权限检查区域 -->
    <div id="accessDenied" class="access-denied" style="display: none;">
        <i class="bi bi-shield-exclamation"></i>
        <h3>访问被拒绝</h3>
        <p>请先登录系统。</p>
        <a href="/ercms/login" class="btn btn-primary">去登录</a>
    </div>

    <!-- 主要内容区域 -->
    <div id="mainContent" style="display: none;">
        <nav class="navbar">
            <div class="container">
                <a th:href="@{/}" class="navbar-brand">
                    <img th:src="@{/images/ing1.png}" alt="ERCMS Logo" class="navbar-logo">
                    应急响应中心管理系统
                </a>
                <ul class="navbar-nav">
                    <li class="nav-item"><a th:href="@{/}" class="nav-link active">首页</a></li>
                    <li class="nav-item"><a th:href="@{/events}" class="nav-link">事件管理</a></li>
                    <li class="nav-item"><a th:href="@{/resource}" class="nav-link">资源调度</a></li>
                    <li class="nav-item"><a th:href="@{/reports}" class="nav-link">统计分析</a></li>
                    <li class="nav-item"><a th:href="@{/settings}" class="nav-link">系统设置</a></li>
                </ul>
                <div class="navbar-user">
                    <span id="userInfo" class="text-white me-3"></span>
                    <button class="btn btn-outline-light btn-sm" onclick="logout()">退出</button>
                </div>
            </div>
        </nav>

        <div class="welcome-section">
            <div class="container">
                <h1>欢迎使用应急响应中心管理系统</h1>
                <p>快速响应、高效调度、科学决策</p>
                <div id="userWelcome" class="mt-3"></div>
            </div>
        </div>

        <div class="container content">
            <h2>系统概览</h2>
            
            <div class="dashboard">
                <div class="stats-card card-red">
                    <div class="card-body">
                        <h3 class="card-title">待处理事件</h3>
                        <p>当前有<span id="pendingEvents">-</span> 个待处理事件</p>
                        <a th:href="@{/events}" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
                
                <div class="stats-card card-blue">
                    <div class="card-body">
                        <h3 class="card-title">进行中事件</h3>
                        <p>当前有<span id="inProgressEvents">-</span> 个进行中事件</p>
                        <a th:href="@{/events}" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
                
                <div class="stats-card card-green">
                    <div class="card-body">
                        <h3 class="card-title">可用资源</h3>
                        <p>当前有<span id="availableResources">-</span> 个可用资源</p>
                        <a th:href="@{/resource}" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
                
                <div class="stats-card card-orange">
                    <div class="card-body">
                        <h3 class="card-title">人员状态</h3>
                        <p>当前有<span id="availablePersonnel">-</span> 名人员在岗</p>
                        <a th:href="@{/personnel}" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
            
            <h2>最近事件</h2>
            <div class="card">
                <div class="card-body">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>事件名称</th>
                                <th>类型</th>
                                <th>地点</th>
                                <th>状态</th>
                                <th>上报时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="recentEventsTable">
                            <tr>
                                <td colspan="6" class="text-center text-muted">
                                    <i class="bi bi-hourglass-split"></i> 加载中...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 应急响应中心管理系统 保留所有权利</p>
        </div>
    </footer>

    <script th:src="@{/lib/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script src="../static/js/auth.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查认证状态
            if (!AuthManager.isAuthenticated()) {
                showAccessDenied();
                return;
            }

            // 显示主要内容
            showMainContent();
            
            // 加载用户信息
            loadUserInfo();
            
            // 加载统计数据
            loadDashboardStats();
            
            // 加载最近事件
            loadRecentEvents();
        });

        // 显示访问被拒绝
        function showAccessDenied() {
            document.getElementById('accessDenied').style.display = 'block';
            document.getElementById('mainContent').style.display = 'none';
        }

        // 显示主要内容
        function showMainContent() {
            document.getElementById('accessDenied').style.display = 'none';
            document.getElementById('mainContent').style.display = 'block';
        }

        // 加载用户信息
        async function loadUserInfo() {
            try {
                const user = await AuthManager.getCurrentUser();
                if (user) {
                    document.getElementById('userInfo').textContent = `欢迎，${user.realName}`;
                    document.getElementById('userWelcome').innerHTML = `
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>用户:</strong> ${user.realName} (${user.username})</p>
                                <p><strong>角色:</strong> ${getRoleDisplayName(user.role)}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>部门:</strong> ${user.departmentName || '未分配'}</p>
                                <p><strong>状态:</strong> ${user.enabled ? '启用' : '禁用'}</p>
                            </div>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('加载用户信息失败:', error);
            }
        }

        // 加载仪表盘统计数据
        async function loadDashboardStats() {
            try {
                const response = await fetch('/ercms/api/statistics/dashboard/overview', {
                    headers: {
                        'Authorization': `Bearer ${AuthManager.getToken()}`
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    if (data.success) {
                        document.getElementById('pendingEvents').textContent = data.data.pendingEvents || 0;
                        document.getElementById('inProgressEvents').textContent = data.data.inProgressEvents || 0;
                        document.getElementById('availableResources').textContent = data.data.availableResources || 0;
                        document.getElementById('availablePersonnel').textContent = data.data.availablePersonnel || 0;
                    }
                }
            } catch (error) {
                console.error('加载统计数据失败:', error);
            }
        }

        // 加载最近事件
        async function loadRecentEvents() {
            try {
                const response = await fetch('/ercms/api/events/recent?limit=5', {
                    headers: {
                        'Authorization': `Bearer ${AuthManager.getToken()}`
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    if (data.success && data.data) {
                        renderRecentEvents(data.data);
                    } else {
                        showNoEvents();
                    }
                }
            } catch (error) {
                console.error('加载最近事件失败:', error);
                showNoEvents();
            }
        }

        // 渲染最近事件
        function renderRecentEvents(events) {
            const tbody = document.getElementById('recentEventsTable');
            
            if (events.length === 0) {
                showNoEvents();
                return;
            }
            
            tbody.innerHTML = events.map(event => `
                <tr>
                    <td>${event.title}</td>
                    <td>${event.eventType ? event.eventType.name : '未知'}</td>
                    <td>${event.location || '未指定'}</td>
                    <td><span class="badge badge-${getStatusBadgeClass(event.responderStatus)}">${getStatusDisplay(event.responderStatus)}</span></td>
                    <td>${formatDateTime(event.startTime)}</td>
                    <td><a href="/ercms/events/${event.id}" class="btn btn-primary btn-sm">查看</a></td>
                </tr>
            `).join('');
        }

        // 显示无事件
        function showNoEvents() {
            const tbody = document.getElementById('recentEventsTable');
            tbody.innerHTML = `
                <tr>
                    <td colspan="6" class="text-center text-muted">
                        <i class="bi bi-inbox"></i> 暂无最近事件
                    </td>
                </tr>
            `;
        }

        // 获取状态显示文本
        function getStatusDisplay(status) {
            const statusMap = {
                'PENDING': '待处理',
                'ASSIGNED': '已分配',
                'ACCEPTED': '已接受',
                'EN_ROUTE': '前往中',
                'ARRIVED': '已到达',
                'IN_PROGRESS': '处理中',
                'COMPLETED': '已完成',
                'CLOSED': '已关闭'
            };
            return statusMap[status] || status;
        }

        // 获取状态徽章样式
        function getStatusBadgeClass(status) {
            const classMap = {
                'PENDING': 'danger',
                'ASSIGNED': 'primary',
                'ACCEPTED': 'info',
                'EN_ROUTE': 'warning',
                'ARRIVED': 'info',
                'IN_PROGRESS': 'warning',
                'COMPLETED': 'success',
                'CLOSED': 'secondary'
            };
            return classMap[status] || 'secondary';
        }

        // 获取角色显示名称
        function getRoleDisplayName(role) {
            const roleNames = {
                'ADMIN': '系统管理员',
                'DEPT_MANAGER': '部门管理员',
                'DISPATCHER': '调度员',
                'END_USER': '终端用户'
            };
            return roleNames[role] || role;
        }

        // 格式化日期时间
        function formatDateTime(dateTimeStr) {
            if (!dateTimeStr) return '未知';
            const date = new Date(dateTimeStr);
            return date.toLocaleString('zh-CN');
        }

        // 退出登录
        function logout() {
            AuthManager.logout();
            window.location.href = '/ercms/login';
        }
    </script>
</body>
</html> 
